<template>
  <div>
    <el-dialog title="添加用户信息" :visible.sync="dialogFormVisible">
      <el-form
      :model="form"
      v-loading="fetchLoading"
      class="sectionForm"
      size="mini"
      element-loading-text="数据加载中,请耐心等待..."
      label-width="80px"
      label-position="right">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="用户账号">
              <el-input v-model="form.userName" placeholder="用户账号" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户密码">
              <el-input v-model="form.password" placeholder="用户密码" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="用户昵称">
                <el-input v-model="form.nickName" placeholder="用户昵称" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型">
                <el-select v-model="form.userType"  placeholder="用户类型" style="width:100%">
                  <el-option label="普通用户" value=0></el-option>
                  <el-option label="管理员" value=1></el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="用户邮箱">
                <el-input v-model="form.email"  placeholder="用户邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码">
                <el-input v-model="form.phonenumber"  placeholder="手机号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="用户性别">
                <el-select v-model="form.sex"  placeholder="用户性别" style="width:100%">
                  <el-option label="男" value=0></el-option>
                  <el-option label="女" value=1></el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" v-if="type==='add'" @click="add">确认添加</el-button>
        <el-button type="primary" v-else @click="add">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default{
  name:'add',
  props:{
    type:{
      type:String,
    }
  },
  data(){
    return {
      dialogFormVisible:false,
      fetchLoading: false,
      form: {
        userName:'',
        nickName:'',
        password:"",
        userType:'',
        email:'',
        phonenumber:'',
        sex:'',
        remark:''
      },
    }
  },
  methods:{
    cancel(){
      this.dialogFormVisible = false
      Object.assign(this.$data.form, this.$options.data().form)
    },
    async add(){
      this.dialogFormVisible = false
      try{
        let res=await this.$API.userManagement.saveOrUpdate(this.form)
        if(res.code==200){
          this.$message({type:"success",message:this.type==="add"?"添加成功":"修改成功"})
          this.$parent.updatePageList()
          Object.assign(this.$data.form, this.$options.data().form)
        }
      }catch{
        this.$message({type:"error",message:this.type==="add"?"添加失败":"修改失败"})
      }
    }
  }
}
</script>

<style scoped>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-bottom: 20px;
  }
</style>